<template>
	<AppHeader :title="title" :banAnimate="true" :backgroundColor="'#ffffff'">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="container">
		<div class="main" v-if="listeningList.length>>0">
			<van-collapse v-model="activeNames">
				<van-collapse-item :title="item.templateSettings.content" :name="index"
					v-for="(item,index) in listeningList" :key="index">
					<div class="questionsBox">
						<div v-if="item.questions[0].type==5">
							<div v-for="ctItem in item.questions[0].trunk.body.split('\n')" style="margin: 10px 0;">
								{{ctItem}}
							</div>
						</div>
						<div v-if="item.questions[0].type==5" style="border-bottom: 2px solid #f7f7f7;">
							<audioPlayer :audioSrc="resmainUrl + item.questions[0].trunk.attachments[0].url">
							</audioPlayer>
						</div>
						<div :class="childIndex!=(item.questions[0].children.length-1)?'questionsItem borderBottom':'questionsItem'"
							v-for="(childItem,childIndex) in item.questions[0].children" :key="childIndex">
							<div style="margin: 10px 0;padding: 0 10px;">{{childItem.trunk.body}}</div>

							<div v-for="(attItem,attIndex) in childItem.trunk.attachments">
								<div v-if="attItem.fileType==2">
									<audioPlayer :audioSrc="resmainUrl + attItem.url"></audioPlayer>
								</div>
								<div v-if="attItem.fileType==1">
									<img :src="resmainUrl + attItem.url" style="width: 100%;" />
								</div>
							</div>
							<div v-for="(optionItem,optionIndex) in childItem.options" style="padding: 0 10px;">
								<div style="display: flex;align-items: center;margin-bottom: 20px;margin-top: 20px;"
									v-if="item.questions[0].type!=3">
									<div :class="childItem.select == optionIndex?'select active':'select'">
										{{ optionsMap[optionIndex] }}
									</div>
									<span v-if="optionItem.value[0].body">{{ optionItem.value[0].body }}</span>
								</div>
								<div style="display: flex;align-items: center;padding:10px 0;border-top: 2px solid #f7f7f7;"
									v-if="item.questions[0].type==3">
									<span v-if="optionItem.write">{{ optionItem.write }}</span>
								</div>
								<img v-if="!optionItem.value[0].body"
									:src="resmainUrl + optionItem.value[0].attachments[0].url"
									style="width: 60px;height: 60px;margin-top: 10px;" />
							</div>
						</div>
					</div>
				</van-collapse-item>

			</van-collapse>

		</div>
		<div class="submit-btn">
			<span class="btn" @click="handleSubmit">交作业</span>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import audioPlayer from "@/components/audioPlayer/index.vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		ref,
		onMounted,
		onUnmounted,
		watch
	} from "vue";
	import {
		saveExercise
	} from "@/api/listening";
	const router = useRouter();
	const route = useRoute();
	const title = route.query.title;
	const activeNames = ref([])
	const listeningList = ref([])
	const resmainUrl = ref('https://d-xueer.bigchun.com/file/listening/res/')
	const optionsMap = ["A", "B", "C", "D", "E", "F", "G"]; //题目选项映射
	const listeningSuccessData = ref()
	const onClickLeft = () => {
		router.back();
	};

	const handleSubmit = () => {
		saveExercise(listeningSuccessData.value).then(res => {
			localStorage.setItem('listeningSuccessData', JSON.stringify(res.data))
			router.push({
				path: "/listening/work-score",
				query: {
					versionId: route.query.versionId,
					title: route.query.title,
					mission_id: route.query.mission_id,
				},
			});
		})
	};
	onMounted(() => {
		let listeningSuccessJSON = localStorage.getItem("listeningSuccessInfo")
		listeningSuccessData.value = JSON.parse(listeningSuccessJSON)
		listeningList.value = JSON.parse(listeningSuccessData.value.json)
		console.log(listeningList.value)
	});
</script>

<style lang="scss" scoped>
	.borderBottom {
		border-bottom: 2px solid #f7f7f7;
	}

	.select {
		width: 30px;
		height: 30px;
		margin-right: 20px;
		text-align: center;
		line-height: 30px;
		background-color: #f0eceb;
		color: #bdb9b8;
		border-radius: 50%;
		font-size: 16px;
	}

	.active {
		background-color: #0cb76c;
		color: #ffffff;
	}

	.container {
		height: 100%;
		background-color: #f5f5f5;
		padding: 56px 10px 0 10px;
		overflow-y: auto;

		.main {
			background-color: #fff;
			height: auto;
			border-radius: 15px;
			padding: 10px;
			// padding-bottom: 0px;
			margin-bottom: 80px;
			.audio {
				height: 20px;
				width: 100px;
			}
		}

		.submit-btn {
			width: 100%;
			position: fixed;
			background-color: #fff;
			padding: 10px 0;
			left: 0;
			bottom: 0;
			text-align: center;

			.btn {
				width: calc(100% - 20px);
				height: 45px;
				line-height: 45px;
				display: inline-block;
				background: linear-gradient(270deg, #29f19c 0%, #02a1f9 100%);
				border-radius: 23px;
				text-align: center;
				font-size: 18px;
				color: #ffffff;
			}
		}
	}
</style>